<template>
  <div class="hello">
    <h2 >1.条件语句 v-if  |v-else-if |v-else</h2>
    <br>
    <input v-model="ifparam" >
    <div v-if="ifparam=='1'" >
      指令代码：v-if="param1==='1'"
    </div>
    <div v-else-if="ifparam==='2'" >
      指令代码：else-if="param1=2"
    </div>
    <div v-else >
      其他
    </div>
    <h2 >2.v-show</h2>      <br>
    <input v-model="showparam" >
    <div v-show="showparam=='1'" >
      你好：zcc!!!
      指令代码：v-show="showparam=='1'"
    </div>
    <h2 >3.便利循环 v-for</h2>      <br>

    <li v-for="item in items" :key="item">
      {{ item }}
    </li>

  </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            ifparam: '1',
            showparam: '22222',
            items: [20, 23, 18, 65, 32, 19, 54, 56, 41]
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
